<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="/static/css/normalize.min.css">
<link rel="stylesheet" href="/static/css/inp.css">
    <script src="/static/js/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        function checkPwd(pwd){ //8-20 位
  const pwdCheck = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{8,20}$/;
  if (pwd.length < 1) {
    return 1;
  }else if (pwd.length < 8 ){
    return 2;
  }else if(!pwdCheck.test(pwd)){
    return 3;
  }else{
    return 0;
  }
}
        function checkUpdate(){
        if ($("#pwd").val()==$("#cpwd").val()){
            $("#pwd_e1").css('display','none')
            if (checkPwd($("#pwd").val())==0){
                $("#pwd_e2").css('display','none')
                return true
            }else {
                if($("#pwd").val()==""){
                    $("#pwd_e2").css('display','none')
                    return true;
                }
                $("#pwd_e2").css('display','block')
                return false;
            }
        }
        else{
            $("#pwd_e1").css('display','block')
            return false;
        }
    }
    </script>

</head>
<body>

<canvas></canvas>

<div class="form-wrapper">
  <form action="/update/" method="post" onsubmit="return checkUpdate()">
      <label for="pwd">New Password</label>
    <input type="password" id="pwd" value="" name="pwd">

      <label for="cpwd">Confirmed Password</label>
    <input type="password" id="cpwd" value="" name="cpwd">
    <span id="pwd_e2" style="display: none;font-size: 8px;color: red">Password should include 8-10</span>
    <span id="pwd_e1" style="display: none;font-size: 8px;color: red">Two passwords are different</span>
    <label for="cadd">Current Address</label>
    <input type="text" id="cadd" value="{{ wadd }}" name="wadd">
    <label for="sign">Experiences</label>
      <textarea type="text" id="sign" name="exp" style="height: 80px">{{ exp }}</textarea>

    <button type="submit">Update</button>
  </form>
</div>

<script src="/static/js/inp.js"></script>
<script src='/static/js/jquery.js'></script>

 
</body>
</html>